<template>
	<div>
		<el-dialog title="预览稿件" v-model="isShowDialog" >
			<el-table ref="tablePreviewRef" :data="tableData.data" style="width: 100%" row-key="id">
				<el-table-column type="index" align="cneter" width="50" show-overflow-tooltip></el-table-column>
				<el-table-column label="稿件编号" prop="id" show-overflow-tooltip width="180"></el-table-column>
				<el-table-column label="稿件标题" prop="title" show-overflow-tooltip></el-table-column>
				<el-table-column label="细览名称" prop="name" show-overflow-tooltip width="150">
					<template #default="scope">
						<span v-if="scope.row.name != null">{{scope.row.name}}</span>
						<span v-else class="color-danger">未配置</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="180">
					<template #default="scope">
						<el-button :disabled="scope.row.templateId == null" type="primary" link @click="onPreviewDocument(scope.row)">预览</el-button>
						<el-button :disabled="scope.row.docStatus != 5" type="primary" link @click="onViewReleasedUrl(scope.row)">查看</el-button>
						<el-button :disabled="scope.row.docStatus != 5" type="primary" link @click="onReleasedUrlCopy(scope.row)">复制</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref,  } from 'vue';
import { copyText } from '/@/utils/commonFunction';
import { getSiteConfig } from '/@/api/cms/channel/index';
import { getDocumentTemplate, previewDocument } from '/@/api/cms/document/index';
export default {
	name: 'cms/template/select',
	setup() {
		const tablePreviewRef = ref();
		const state = reactive({
			isShowDialog: false,
			siteConfig : {},
			tableData: {
				data: [],
				total: 0,
				loading: false
			}
		});
		
		// 打开弹窗
		const openDialog = (row?: object) => {
			state.isShowDialog = true;
			getDocumentTemplate({id: row.id}).then((res) => {
				if(res.code == 0){
					state.tableData.data = res.data;
					state.tableData.total = res.total;
				}
			});
			getSiteConfig({siteId: row.siteId}).then((res) => {
				if(res.code == 0 && res.data){
					state.siteConfig = res.data;
				}
			});
		};
		
		// 稿件在线预览
		const onPreviewDocument = (row?: object) => {
			window.open(previewDocument(row));
		}
		// 稿件发布地址查看
		const onViewReleasedUrl = (row?: object) => {
			let text = state.siteConfig.siteUrl + "/" + state.siteConfig.siteCode + "/" + row.channelId + "/" + row.releasedId + ".html";
			window.open(text);
		}
		// 稿件发布地址复制
		const onReleasedUrlCopy = (row?: object) => {
			let text = state.siteConfig.siteUrl + "/" + state.siteConfig.siteCode + "/" + row.channelId + "/" + row.releasedId + ".html";
			copyText(text);
		}
		
		return {
			tablePreviewRef,
			openDialog,
			onPreviewDocument,
			onViewReleasedUrl,
			onReleasedUrlCopy,
			...toRefs(state),
		};
	},
};
</script>

<style>
</style>
